<script >
export default {
    name: "StatiscalNav",
    data() {
        return {
            activeIndex: "1",
            radio: "today",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            
            value2: ''
        }
    },
    methods: {
        handleSelect(index) {
            this.$emit("select", index);
            console.log('select', index)
        }
    }
}
</script> 
<template>
    <div class="statiscal-nav">
        <div class="statiscal-nav-item" style="padding-left: 50px;"  >
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">销售额</el-menu-item>
                <el-menu-item index="2">访问量</el-menu-item>
            </el-menu>
        </div>
        <div class="statiscal-left">
            <el-radio-group v-model="radio" style="margin-right: 20px;">
                <el-radio-button label="today">今日</el-radio-button>
                <el-radio-button label="thisweek">本周</el-radio-button>
                <el-radio-button label="thismonth">本月</el-radio-button>
                <el-radio-button label="thisyear">今年</el-radio-button>
            </el-radio-group>
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
        </div>
    </div>
</template> 
<style scoped>
.statiscal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
}
</style>